import { Modal } from 'antd';
import React, { useState, useEffect } from 'react';
import { isAssetTypeAnImage, isAssetTypeAnWord } from '@/utils/utils';
import { VerticalAlignBottomOutlined } from '@ant-design/icons';
import { downloadImgFile } from '@/services/login';
import moment from 'moment';
import PDFjSViewer from '../PDFJSMobeilViewer';

interface FileOpenProps {
  modalVisible: boolean;
  title?: string;
  download?: 1 | 2; //1 能下载，2 不能下载
  fielUrl: string;
  onCancel: () => void;
}

const FileOpen: React.FC<FileOpenProps> = (props) => {
  const { modalVisible, fielUrl, download, title, onCancel } = props;
  const [canDownload, setDown] = useState<boolean>(download == 2 ? false : true);
  const [isMobile, setIsMobile] = useState<boolean>(false);

  const fileUrls = fielUrl ? fielUrl.split(',') : [];

  const down = (url: string) => {
    // downloadImgFile({ fileUrl: url })
    //   .then((res) => {
    //     const nowTime = moment().format('YYYYMMDDHHmm');
    //     const blob = new Blob([res]);
    //     const objectURL = URL.createObjectURL(blob);
    //     const btn = document.createElement('a');
    //     const body = document.querySelector('body');
    //     if (body) {
    //       body.appendChild(btn);
    //     }
    //     btn.download = (title || '') + nowTime + '.jpg';
    //     btn.target = "downloadFile";
    //     btn.href = objectURL;
    //     btn.click();
    //     if (body) {
    //       body.removeChild(btn); // 删除标签
    //     }
    //   })
    //   .catch(() => {});
    const nowTime = moment().format('YYYYMMDDHHmm');
    const name = title ? title : nowTime;
    const fileurl = url.split('?');
    window.open(`/open/publicity/downloadFile?fileName=${name.replace(/#/g,"23%")}&fileUrl=${(fileurl[0]).replace(/#/g,"23%")}`);
  };

  const checkWidth = () => {
    const width = document.documentElement.clientWidth;
    if (width < 768) {
      setIsMobile(true);
    } else {
      setIsMobile(false);
    }
  };

  useEffect(() => {
    checkWidth();
  }, []);

  return (
    <Modal
      destroyOnClose
      title={`查看${title || ''}文件(${fileUrls.length}个)`}
      style={{ top: 20 }}
      visible={modalVisible}
      width={1300}
      footer={null}
      onCancel={onCancel}
    >
      {fileUrls.length > 0 &&
        fileUrls.map((item, index) => {
          if (isAssetTypeAnImage(item)) {
            return (
              <div
                style={{
                  width: '100%',
                  position: 'relative',
                  border: '1px solid #e6e6e6',
                  minHeight: '100px',
                  marginBottom: '10px',
                }}
                key={index}
              >
                <img src={item} width="100%" />
                {canDownload && (
                  <a
                    style={{
                      position: 'absolute',
                      right: '10px',
                      top: '10px',
                      fontSize: '15px',
                      fontWeight: 'bold',
                      background: 'rgba(0, 95, 224, 0.8)',
                      padding: '2px 5px',
                      borderRadius: '8px',
                      color: '#fff',
                    }}
                    onClick={() => {
                      down(item);
                    }}
                  >
                    <VerticalAlignBottomOutlined /> 下载
                  </a>
                )}
              </div>
            );
          }
          if (isAssetTypeAnWord(item)) {
            return (
              <div
                style={{
                  width: '100%',
                  height: '100px',
                  border: '1px solid #e6e6e6',
                  textAlign: 'center',
                  padding: '15px',
                  marginBottom: '10px',
                }}
                key={index}
              >
                <div>当前文件不支持阅览，请下载后查看</div>
                {/* href={item}
                  target="downloadFile" */}
                {canDownload && (
                  <a
                    style={{ fontSize: '20px', marginTop: '20px' }}
                    onClick={() => {
                      down(item);
                    }}
                  >
                    <VerticalAlignBottomOutlined /> 下载
                  </a>
                )}
              </div>
            );
          }
          return (
            <span style={{ width: '100%' }} key={index}>
              {isMobile ? (
                <div
                  style={{
                    width: '100%',
                    marginBottom: '10px',
                  }}
                >
                  <PDFjSViewer
                    file={item}
                    chiledStyle={{
                      width: '100%',
                      height: '60vh',
                    }}
                  />
                </div>
              ) : (
                <div
                  style={{
                    width: '100%',
                    position: 'relative',
                    border: '1px solid #e6e6e6',
                    height: '90vh',
                    marginBottom: '10px',
                  }}
                >
                  <iframe
                    width="100%"
                    style={{ height: '90vh', border: '1px solid #e6e6e6' }}
                    src={item + '#toolbar=0'}
                    frameBorder="0"
                  />
                  {canDownload && (
                    <a
                      style={{
                        position: 'absolute',
                        right: '10px',
                        top: '10px',
                        fontSize: '15px',
                        fontWeight: 'bold',
                        background: 'rgba(0, 95, 224, 0.8)',
                        padding: '2px 5px',
                        borderRadius: '8px',
                        color: '#fff',
                      }}
                      onClick={() => {
                        down(item);
                      }}
                    >
                      <VerticalAlignBottomOutlined /> 下载
                    </a>
                  )}
                </div>
              )}
            </span>
          );
        })}
      <iframe style={{ display: 'none' }} name="downloadFile" />
    </Modal>
  );
};

export default FileOpen;
